<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        input{
            width: 150px;
            height: 30px;
            line-height: 25px;
            padding: 5px 10px;
            border-radius: 5px;
            border: 2px solid;
            font-size: 16px;
        }
        #msg{
            width: 300px;
        }
        button{
            width: 80px;
            height: 44px;
            padding: 5px 20px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
聊天室<br/><br/>
<input type="text" id="sendOutUser" placeholder="自己的用户名">
<button onclick="connectWebSocket()">上线</button>
<button onclick="closeWebSocket()">下线</button>
<br/><br>
<input type="text" id="msg" placeholder="要发送的信息"/>
<input type="text" id="receiveUser" placeholder="接收人的用户名"/>
<button onclick="send()">发送</button>

<br><br>
<hr>
<div id="msgList"></div>

<script type="text/javascript">
    var websocket = null;
    //连接WebSocket
    function connectWebSocket() {
        var sendOutUser = document.getElementById("sendOutUser").value;
        if (sendOutUser === "") {
            alert("请输入用户名");
            return;
        }
        //判断当前浏览器是否支持websocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:1004/web-socket/"+document.getElementById("sendOutUser").value);
        } else {
            alert('当前浏览器 not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            alert("连接发生错误");
        };
        //连接成功建立的回调方法
        websocket.onopen = function () {
            var sendOutUser = document.getElementById("sendOutUser")
            sendOutUser.readOnly = true
            sendOutUser.style.backgroundColor='#ddd'
        }
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            console.log(event.data)
            innerdiv("",event.data)
        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            innerdiv("","websocket连接关闭");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closewebsocket();
        }
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var m = new Map(); // 空Map
        var sendOutId = document.getElementById("sendOutUser")  //发送者
        var msg = document.getElementById("msg").value  //发送消息
        if (msg === "") {
            alert("请输入消息");
            return;
        }
        var receiveUser = document.getElementById("receiveUser").value //接收者
        m.set("sendOutUser",sendOutUser.value);
        m.set("msg",msg)
        // 接收者为空时，type为群聊，否则为私聊
        if (receiveUser === "") {
            m.set("type",0)
        }else{
            m.set("receiveUser",receiveUser)
            m.set("type",1)
        }
        json = mapToJson(m)
        websocket.send(json)
        innerdiv("我",msg)
    }

    //map转换为json
    function  mapToJson(map) {
        var obj= Object.create(null);
        for (var[k,v] of map) {
            obj[k] = v;
        }
        return JSON.stringify(obj);
    }
    //显示聊天记录到页面
    function innerdiv(id,txt){
        var msgList = document.getElementById("msgList")
        if (id === "") {
            msgList.innerHTML += "<div>" + txt + "</div><br>"
        }else{
            msgList.innerHTML += "<div>"+ id +": "+txt+ "</div><br>"
        }
    }
</script>
</body>
</html>
